<template>
  <div class="step_wrap">
    <div class="step_cont">
      <el-steps
        :space="200"
        :active="stepActive"
        :process-status="processStatus"
        finish-status="success"
        align-center
      >
        <el-step v-for="item in stepData" :key="item.title">
          <span slot="title">{{item.title}}</span>
        </el-step>
      </el-steps>
    </div>
    <div class="step_notes">
      <div class="label">注释： 通过的流程</div>
      <div class="sNotes_col">
        <i class="step_dot dot_finish"></i>
        <span>现在的节点</span>
      </div>
      <div class="sNotes_col">
        <i class="step_dot dot_default"></i>
        <span>未完成</span>
      </div>
    </div>
  </div>
</template>

<script>
import { } from '@/api/api.js'
export default {
  name: 'Step',
  data() {
    return {
      applyId: '',
      stepData: [
        { title: '申请完成' },
        { title: '审核完成' },
        { title: '安排完成' },
        { title: '接收完成' }
      ],
      ProcessList: [],
      processStatus: 'finish',
      stepActive: -1// 步骤
    }
  },
  methods: {
    getProcessList(row) {
      this.stepActive = this.processApplyStatus(row.applyStatus)
    },
    // 当前会诊状态
    processApplyStatus(applyStatus) {
      let active = -1
      if (applyStatus != null && applyStatus != '') {
        switch (applyStatus) {
          case 2:
          case 3:
            active = 0 // 申请完成
            break
          case 4:
            active = 1 // 审核完成
            break
          case 5:
            active = 2 // 安排完成
            break
          case 6:
            active = 3 // 接收完成
            break
        }
      }
      return active
    }
  }
}
</script>

<style lang="scss" scoped>
.step_wrap {
  .step_cont {
    margin-bottom: 20px;
  }
  .step_notes {
    width: 100%;
    overflow: hidden;
    display: flex;
    .sNotes_col {
      margin-left: 10px;
      .step_dot {
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        vertical-align: -2px;
      }
      .dot_finish {
        background-color: #00c0ef;
      }
      .dot_return {
        background-color: #e08e0b;
      }
      .dot_default {
        background-color: #ccc;
      }
    }
  }
  .message_wrap {
    padding: 20px 0;
    .msg_col {
      overflow: hidden;
      font-size: 14px;
      margin: 4px 0;
      .time {
        float: left;
        width: 140px;
        color: rgb(214, 167, 11);
        font-weight: bold;
      }
      .msg {
        padding-left: 140px;
        color: #333;
      }
    }
  }
}
</style>

<style>
/* 修改step样式 */
.el-step__head.is-error {
  color: #e08e0b;
  border-color: #e08e0b;
}
.el-step__title.is-error,
.el-step__description.is-error {
  color: #e08e0b;
}
</style>
